<template>
  <div class="background">
    <a-layout id="components-layout-demo-responsive">
      <a-layout-sider
        breakpoint="lg"
        collapsedWidth="0"
        @collapse="onCollapse"
        @breakpoint="onBreakpoint"
        theme="dark"
      >
        <!-- 图标 -->
        <div class="logo">
          <img src="@/assets/logo.svg">
        </div>

        <!-- 导航栏 -->
        <a-menu theme="dark" mode="inline" :defaultSelectedKeys="['4']" class="left_bar">
          <a-menu-item key="1">
            <a-icon type="user"/>
            <span class="nav-text">nav 1</span>
          </a-menu-item>
          <a-menu-item key="2">
            <a-icon type="video-camera"/>
            <span class="nav-text">nav 2</span>
          </a-menu-item>
          <a-menu-item key="3">
            <a-icon type="upload"/>
            <span class="nav-text">nav 3</span>
          </a-menu-item>
          <a-menu-item key="4">
            <a-icon type="user"/>
            <span class="nav-text">nav 4</span>
          </a-menu-item>
          <a-menu-item key="5">
            <a-icon type="user"/>
            <span class="nav-text">nav 5</span>
          </a-menu-item>
          <a-menu-item key="6">
            <a-icon type="user"/>
            <span class="nav-text">nav 6</span>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <!-- 主体 -->
      <a-layout>
        <!-- 标题头 -->
        <a-layout-header class="red" :style="{ padding: 0 }"/>
        <!-- 主题 -->
        <a-layout-content :style="{ margin: '24px 16px 0' }">
          <div :style="{ padding: '24px', background: '#fff', minHeight: '560px' }">
            <!-- 第一行 -->
            <div class="line1">
              <div id="cpu" v-bind:style="{width: '300px', height: '300px', position:'absolute'}"></div>
              <div id="cpu1" v-bind:style="{width: '300px', height: '300px'}"></div>

            </div>

            <!-- 第二行 -->
            <div>
              <div id="cpuLineDashbroad" v-bind:style="{width: '500px', height: '300px'}"></div>
            </div>
          </div>
        </a-layout-content>
        <a-layout-footer style="textAlign: center">xxxx ©2018 Created by HHH</a-layout-footer>
      </a-layout>
    </a-layout>
  </div>
</template>
<script>
import "echarts/theme/infographic";
import "echarts/theme/macarons";
import "echarts/theme/dark";
import "@/assets/css/color.css";
import "@/assets/css/index.css";
import option from "@/echarts/cpu.js";
import option1 from "@/echarts/cpu_list_chart.js";
import { Button, message, Row, Col } from "ant-design-vue";

export default {
  name: "App",
  data() {
    return {
      message: "dddd"
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      var charts1 = this.$echarts.init(
        document.getElementById("cpu"),
        "infographic"
      );
      var charts2 = this.$echarts.init(document.getElementById("cpuLineDashbroad"), "infographic");
      // 绘制图表
      charts1.setOption(option);
      charts2.setOption(option1);
    },
    onCollapse(collapsed, type) {
      console.log(collapsed, type);
    },
    onBreakpoint(broken) {
      console.log(broken);
    }
  }
};
</script>
<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0px;
}
</style>
